<!---

Search
Sticky sort order
Sticky columnlist
Select (multiple)
Emal selected

--->

<cfparam name="resetFilters" default="false">

<cfoutput>

	<cfscript>
		isFiltered = false;
		queryParams = StructNew();
		// Base
		base = new assets.calgrants.com.Base();
		paymentTypes = base.getPaymentTypes();
		pbsScholarshipTypes = base.getPBSScholarshipTypes();
		nonPBSScholarshipTypes = base.getNonPBSScholarshipTypes();
		statuses = base.getPaymentStatuses();
		// Stored Procedures
		storedProcedureGateway = new assets.calgrants.com.gateway.StoredProcedureGateway();
		cohorts = storedProcedureGateway.call("getDistinctCohorts");
		lastCohort = ListLast(ValueList(cohorts.Cohort));
		scholarshipTypes = storedProcedureGateway.call("getDistinctScholarshipTypes");
		verificationTypes = storedProcedureGateway.call("getVerificationTypes");
		terms = storedProcedureGateway.call("getDistinctTerms");
		termTypes = storedProcedureGateway.call("getDistinctTermTypes");
	</cfscript>
	
	<cfif NOT IsDefined("client.payments.orderBy") or resetFilters>
		<cfset client.payments.orderBy = "">
	<cfelseif IsDefined("orderBy")>
		<cfset client.payments.orderBy = orderBy>
	</cfif>
	
	<cfif NOT IsDefined("client.payments.orderDir") or resetFilters>
		<cfset client.payments.orderDir = "">
	<cfelseif IsDefined("orderDir")>
		<cfset client.payments.orderDir = orderDir>
	</cfif>
	
	<cfif NOT IsDefined("client.payments.columnList") or resetFilters>
		<cfset client.payments.columnList = "payment_id,claim_id">
	<cfelseif IsDefined("columnList")>
		<cfset client.payments.columnList = columnList>
	</cfif>
	
	<cfif NOT IsDefined("client.payments.optOut") or resetFilters>
		<cfset client.payments.optOut = "All">
	<cfelseif IsDefined("filterOptOut")>
		<cfset client.payments.optOut = filterOptOut>
	</cfif>
	<cfif client.payments.optOut neq "All">
		<cfset isFiltered = true />
		<cfset queryParams.Opt_Out = client.payments.optOut />
	</cfif>
	
	<cfif NOT IsDefined("client.payments.paymentType") or resetFilters>
		<cfset client.payments.paymentType = "All">
	<cfelseif IsDefined("filterPaymentType")>
		<cfset client.payments.paymentType = filterPaymentType>
	</cfif>
	<cfif client.payments.paymentType neq "All">
		<cfset isFiltered = true />
		<cfset queryParams.Payment_Type = client.payments.paymentType />
	</cfif>
	
	<cfif NOT IsDefined("client.payments.authorized") or resetFilters>
		<cfset client.payments.authorized = "All">
	<cfelseif IsDefined("filterAuthorized")>
		<cfset client.payments.authorized = filterAuthorized>
	</cfif>
	<cfif client.payments.authorized neq "All">
		<cfset isFiltered = true />
		<cfset queryParams.authorized = client.payments.authorized />
	</cfif>
	
	<cfif NOT IsDefined("client.payments.cohort") or resetFilters>
		<cfset client.payments.cohort = lastCohort>
	<cfelseif IsDefined("filterCohort")>
		<cfset client.payments.cohort = filterCohort>
	</cfif>
	<cfif client.payments.cohort neq lastCohort>
		<cfset isFiltered = true />
		<cfset queryParams.cohort = client.payments.cohort />
	<cfelse>
		<cfset queryParams.cohort = lastCohort />
	</cfif>
	
	<cfset filterScholarshipType = "All" />
	<cfif NOT IsDefined("client.payments.scholarshipType") or resetFilters>
		<cfset client.payments.scholarshipType = "All">
	<cfelseif IsDefined("filterScholarshipType")>
		<cfset client.payments.scholarshipType = filterScholarshipType>
	</cfif>
	<cfif client.payments.scholarshipType neq "All">
		<cfset isFiltered = true />
		<cfset queryParams.scholarshipType = client.payments.scholarshipType />
	</cfif>
	
	<cfif NOT IsDefined("client.payments.scholarshipTypes") or resetFilters>
		<cfset client.payments.scholarshipTypes = "All">
	<cfelseif IsDefined("filterScholarshipTypes")>
		<cfset client.payments.scholarshipTypes = filterScholarshipTypes>
	</cfif>
	<cfif client.payments.scholarshipTypes neq "All">
		<cfset isFiltered = true />
		<cfif client.payments.scholarshipTypes eq "PBS">
			<cfset queryParams.scholarshipTypes = pbsScholarshipTypes>
		<cfelseif client.payments.scholarshipTypes eq "Non-PBS">
			<cfset queryParams.scholarshipTypes = nonPBSScholarshipTypes>
		<cfelse>
			<cfset queryParams.scholarshipTypes = client.payments.scholarshipTypes />
		</cfif>
	</cfif>
	
	<cfif NOT IsDefined("client.payments.term") or resetFilters>
		<cfset client.payments.term = "All">
	<cfelseif IsDefined("filterTerm")>
		<cfset client.payments.term = filterTerm>
	</cfif>
	<cfif client.payments.term neq "All">
		<cfset isFiltered = true />
		<cfset queryParams.term = client.payments.term />
	</cfif>
	
	<cfif NOT IsDefined("client.payments.termType") or resetFilters>
		<cfset client.payments.termType = "All">
	<cfelseif IsDefined("filterTermType")>
		<cfset client.payments.termType = filterTermType>
	</cfif>
	<cfif client.payments.termType neq "All">
		<cfset isFiltered = true />
		<cfset queryParams.termType = client.payments.termType />
	</cfif>
	
	<cfif NOT IsDefined("client.payments.verificationType") or resetFilters>
		<cfset client.payments.verificationType = "All">
	<cfelseif IsDefined("filterVerificationType")>
		<cfset client.payments.verificationType = filterVerificationType>
	</cfif>
	<cfif client.payments.verificationType neq "All">
		<cfset isFiltered = true />
		<cfset queryParams.verificationType = client.payments.verificationType />
	</cfif>
	
	<cfset filterStatutes = "All" />
	<cfif NOT IsDefined("client.payments.statuses") or resetFilters>
		<cfset client.payments.statuses = "All">
	<cfelseif IsDefined("filterStatuses")>
		<cfset client.payments.statuses = filterStatuses>
	</cfif>
	<cfif client.payments.statuses neq "All">
		<cfset isFiltered = true />
		<cfset queryParams.statuses = client.payments.statuses />
	</cfif>
	
	<cfwddx action="cfml2wddx" input="#queryParams#" output="client.payments.queryParamsWDDX" />
	
	<cfscript>
		paymentGateway = new assets.calgrants.com.gateway.PaymentGateway();
		payments = paymentGateway.query(argumentCollection = queryParams);
		/*
		if (NOT IsDefined("client.payments.columnList") or resetFilters) {
			client.payments.columnList = payments.ColumnList;
		} else if (IsDefined("columnList")) {
			client.payments.columnList = columnList;
		}
		*/
	</cfscript>
	
	<h3>Payments<cfif isFiltered> <small><em>filtered</em></small></cfif></h3>

	<cfform name="paymentsForm" id="paymentsForm" action="#script_name#" method="post">
		<cfinput type="hidden" name="view" value="#view#">
		
		<div class="row-fluid" style="margin-bottom: 10px;">
			<div class="span12">
				<a id="filterLink" href="##" class="btn" onclick="toggleFilter('filter')">Show filters</a>
				<div class="btn-group">
					<button class="btn dropdown-toggle" data-toggle="dropdown">Actions</button>
					<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
					<ul class="dropdown-menu">
						<cfif payments.RecordCount gt 0>
							<li><a href="?action=export&collection=payments" target="_new">Export</a></li>
						<cfelse>
							<li><a href="##">None - no records available with filter settings</a></li>
						</cfif>
					</ul>
				</div>
				<!--- search box --->
				
				<span class="pull-right"><strong>Count:</strong> #payments.RecordCount#</span>
			</div>
		</div>

			<div id="filter" class="well well-small" style="display: none;">
				<h4>Filters</h4>
				<table cellpadding="6">
					<tr valign="top">
						<td>
							<label>Cohort</label>
							<cfselect name="filterCohort" size="1" multiple="false" required="yes" message="Cohort filter is required" style="width: 150px;">
								<cfloop query="cohorts">
									<option value="#Cohort#"<cfif client.payments.cohort eq Cohort> selected</cfif>>#Cohort#</option>
								</cfloop>
							</cfselect>
						</td>
						<td>
							<label>Scholarship Types</label>
							<cfselect name="filterScholarshipTypes" size="7" multiple="true" required="yes" message="Scholarship Type is required" style="width: 150px;">
								<option value="All"<cfif client.payments.scholarshipTypes eq "All"> selected</cfif>>All</option>
								<option value="PBS"<cfif client.payments.scholarshipTypes eq "PBS"> selected</cfif>>PBS</option>
								<option value="Non-PBS"<cfif client.payments.scholarshipTypes eq "Non-PBS"> selected</cfif>>Non-PBS</option>
								<cfloop query="scholarshipTypes">
									<option value="#Scholarship_Type#"<cfif ListFind(client.payments.scholarshipTypes, Scholarship_Type)> selected</cfif>>#Scholarship_Type#</option>
								</cfloop>
							</cfselect>
						</td>
						<td>
							<label>Term</label>
							<cfselect name="filterTerm" size="1" multiple="false" required="yes" message="Term filter is required" style="width: 150px;">
								<option value="All"<cfif client.payments.term eq "All"> selected</cfif>>All</option>
								<cfloop query="terms">
									<option value="#Term#"<cfif client.payments.term eq Term> selected</cfif>>#Term#</option>
								</cfloop>
							</cfselect>
						</td>
						<td>
							<label>Term Type</label>
							<cfselect name="filterTermType" size="1" multiple="false" required="yes" message="Term Type filter is required" style="width: 150px;">
								<option value="All"<cfif client.payments.termType eq "All"> selected</cfif>>All</option>
								<cfloop query="termTypes">
									<option value="#Term_Type#"<cfif client.payments.termType eq Term_Type> selected</cfif>>#Term_Type#</option>
								</cfloop>
							</cfselect>
						</td>
						<td>
							<label>Verification Type</label>
							<cfselect name="filterVerificationType" size="1" multiple="false" required="yes" message="Verification Type filter is required" style="width: 150px;">
								<option value="All"<cfif client.payments.verificationType eq "All"> selected</cfif>>All</option>
								<cfloop query="verificationTypes">
									<option value="#Verification_Type#"<cfif client.payments.verificationType eq Verification_Type> selected</cfif>>#Verification_Type#</option>
								</cfloop>
							</cfselect>
						</td>
						<td>
							<label>Opt Out</label>
							<cfselect name="filterOptOut" size="1" multiple="false" required="yes" message="Opt Out filter is required" style="width: 150px;">
								<option value="All"<cfif client.payments.optOut eq "All"> selected</cfif>>All</option>
								<option value="Yes"<cfif client.payments.optOut eq "Yes"> selected</cfif>>Yes</option>
								<option value="No"<cfif client.payments.optOut eq "No"> selected</cfif>>No</option>
							</cfselect>
						</td>
						<td>
							<label>Payment Type</label>
							<cfselect name="filterPaymentType" size="1" multiple="false" required="yes" message="Payment Type filter is required" style="width: 150px;">
								<option value="All"<cfif client.payments.paymentType eq "All"> selected</cfif>>All</option>
								<cfloop index="i" from="1" to="#ArrayLen(paymentTypes)#">
									<option value="#paymentTypes[i].value#"<cfif client.payments.paymentType eq paymentTypes[i].value> selected</cfif>>#paymentTypes[i].text#</option>
								</cfloop>
							</cfselect>
						</td>
						<td>
							<label>Status</label>
							<cfselect name="filterStatuses" size="1" multiple="false" required="yes" message="Satus filter is required" style="width: 150px;">
								<option value="All"<cfif client.payments.statuses eq "All"> selected</cfif>>All</option>
								<cfloop index="i" from="1" to="#ArrayLen(statuses)#">
									<option value="#statuses[i].value#"<cfif client.payments.statuses eq statuses[i].value> selected</cfif>>#statuses[i].text#</option>
								</cfloop>
							</cfselect>
						</td>
					</tr>
					<tr>
						<td colspan="5">
							<button type="submit" class="btn">Apply</button> <a href="#script_name#?view=payments&resetFilters=true" class="btn">Clear</a>
						</td>
					</tr>
				</table>
			</div>
	
			<cfif payments.RecordCount gt 0>
			
				<cfscript>			
					// set up grid editing params
					editingParams = StructNew();
					editingParams["verificationType"] = "All";
					editingParams["scholarshipTypes"] = "All";
					editingParams["enrollment"] = false;
					editingParams["performance"] = false;
					editingParams["hasPBSScholarshipType"] = false;
					editingParams["hasNonPBSScholarshipType"] = false;
					if (StructKeyExists(queryParams, "verificationType")) {
						editingParams["verificationType"] = queryParams.verificationType;
					}
					if (StructKeyExists(queryParams, "scholarshipTypes")) {
						editingParams["scholarshipTypes"] = queryParams.scholarshipTypes;
					}
					if (editingParams["scholarshipTypes"] neq "All") {
						// check for PBS and Non-PBS scholarship types in editingParams["scholarshipTypes
						for (i=1; i lte ListLen(editingParams["scholarshipTypes"]); i=i+1) {
							if (ListFindNoCase(pbsScholarshipTypes, ListGetAt(editingParams["scholarshipTypes"], i)) gt 0) {
								editingParams["hasPBSScholarshipType"] = true;
								if (editingParams["hasNonPBSScholarshipType"]) {
									break;
								}
							}
							if (ListFindNoCase(nonPBSScholarshipTypes, ListGetAt(editingParams["scholarshipTypes"], i)) gt 0) {
								editingParams["hasNonPBSScholarshipType"] = true;
								if (editingParams["hasPBSScholarshipType"]) {
									break;
								}
							}
						}
					} else {
						editingParams["hasPBSScholarshipType"] = true;
						editingParams["hasNonPBSScholarshipType"] = true;
					}
					if (editingParams["verificationType"] neq "All") {
						if (editingParams["verificationType"] eq "enrollment") {
							editingParams["enrollment"] = true;
						} else if (editingParams["verificationType"] eq "performance") {
							editingParams["performance"] = true;
						};
					} else {
						editingParams["enrollment"] = true;
						editingParams["performance"] = true;
					};
				</cfscript>
				
				<script type="text/javascript">
				<!--
					var queryParams = #SerializeJSON(queryParams)#;
					var editingParams = #SerializeJSON(editingParams)#;
					var attendanceLevels = #SerializeJSON(base.getAttendanceLevels())#;
					var degreeLevels = #SerializeJSON(base.getDegreeLevels())#;
					var unitsCredits = [{text: "1", value: 1},{text: "2", value: 2},{text: "3", value: 3},{text: "4", value: 4},{text: "5", value: 5},{text: "6", value: 6},{text: "7", value: 7},{text: "8", value: 8},{text: "9", value: 9},{text: "10", value: 10},{text: "11", value: 11},{text: "12", value: 12},{text: "13", value: 13},{text: "14", value: 14},{text: "15", value: 15},{text: "16", value: 16},{text: "17", value: 17},{text: "18", value: 18},{text: "19", value: 19},{text: "20", value: 20},{text: "21", value: 21},{text: "22", value: 22},{text: "23", value: 23},{text: "24", value: 24}];
					var rowData = "";
					var validator;
					
					var hideColumn = function(column) {
						if ((editingParams.enrollment && editingParams.performance) || (editingParams.hasPBSScholarshipType && editingParams.hasNonPBSScholarshipType)) {
							return true;
						} else if (column == "enrollment_units") {
							return editingParams.performance || editingParams.hasNonPBSScholarshipType;
						} else if (column == "enrollment_attendance_level") {
							return editingParams.performance || editingParams.hasPBSScholarshipType;	
						} else if (column == "enrollment_degree_level") {
							return editingParams.performance;		
						} else if (column == "performance_credits") {
							return editingParams.enrollment;
						} else if (column == "performance_gpa") {
							return editingParams.enrollment;	
						}
						return false;
					};
					var payment = kendo.data.Model.define({
						id: "payment_id",
						fields: {
							// uneditable fields
							payment_id: {type: "number", editable: false, nullable: true},
							scholarship_id: {type: "number", editable: false, nullable: true},
							payment_schedule_id: {type: "number", editable: false, nullable: true},
							opt_out: {type: "boolean", editable: true, nullable: true},
							opt_out_reason: {type: "string", editable: true, nullable: true},
							institution1_id: {type: "number", editable: false, nullable: true},
							payment_status: {type: "string", editable: false, nullable: true},
							// editable cells
							institution1_document_date: {type: "date", editable: true, nullable: true},
							institution1_enrollment_units: {type: "number", editable: true, nullable: true},
							institution1_enrollment_attendance_level: {type: "string", editable: true, nullable: true},
							institution1_enrollment_degree_level: {type: "string", editable: true, nullable: true},
							institution1_performance_credits: {type: "number", editable: true, nullable: true},
							institution1_performance_gpa: {type: "number", editable: true, nullable: true},
							/*
							institution2_id: {type: "number", editable: false, nullable: true},
							institution2_document_date: {type: "date", editable: true, nullable: true},
							institution2_enrollment_units: {type: "number", editable: true, nullable: true},
							institution2_enrollment_attendance_level: {type: "string", editable: true, nullable: true},
							institution2_enrollment_degree_level: {type: "string", editable: true, nullable: true},
							institution2_performance_credits: {type: "number", editable: true, nullable: true},
							institution2_performance_gpa: {type: "number", editable: true, nullable: true},
							institution3_id: {type: "number", editable: false, nullable: true},
							institution3_document_date: {type: "date", editable: true, nullable: true},
							institution3_enrollment_units: {type: "number", editable: true, nullable: true},
							institution3_enrollment_attendance_level: {type: "string", editable: true, nullable: true},
							institution3_enrollment_degree_level: {type: "string", editable: true, nullable: true},
							institution3_performance_credits: {type: "number", editable: true, nullable: true},
							institution3_performance_gpa: {type: "number", editable: true, nullable: true},
							*/
							approval_date: {type: "date", editable: true, nullable: true},
							payment_submitted_date: {type: "date", editable: true, nullable: true},
							payment_date: {type: "date", editable: true, nullable: true},
							payment_type: {type: "string", editable: true, nullable: true},
							payment_amount: {type: "number", editable: true, nullable: true},
							payment_reference: {type: "string", editable: true, nullable: true},
							notes: {type: "string", editable: true, nullable: true},
							date_created: {type: "date", editable: false, nullable: true},
							// non-payment properties
							// scholarship
							claim_id: {type: "string", editable: false, nullable: true},
							first_name: { type: "string", editable: false, nullable: true},
							last_name: {type: "string", editable: false, nullable: true},
							full_name: {type: "string", editable: false, nullable: true},
							authorized: {type: "boolean", editable: false, nullable: true},
							// payment_schedule
							cohort: {type: "number", editable: false, nullable: true},
							scholarship_type: {type: "string", editable: false, nullable: true},
					
							term: {type: "string", editable: false, nullable: true},
							term_type: {type: "string", editable: false, nullable: true},
							verification_type: {type: "string", editable: false, nullable: true}
							// institution1
							
							// institution2
						}
					});
					var customPaymentsGridValidator = {
						rules: {
							date: function(input) {
								if (input[0].value.length > 0) {
									var inputNameArray = input[0].name.split("_");
									if (inputNameArray[inputNameArray.length - 1] == "date") {
										if (!isValidDate(input[0].value)) {
											return false;
										}
									}
								}
								return true;
							},
							number: function(input) {
								if (input[0].value.length > 0) {
									var inputNameArray = input[0].name.split("_");
									var lastNamePart = inputNameArray[inputNameArray.length - 1];
									if (lastNamePart == "units" || lastNamePart == "credits" || lastNamePart == "gpa" || lastNamePart == "amount") {
										if (!$.isNumeric(input[0].value) || input[0].value < 0) {
											return false;
										}
									}
								}
								return true;
							}
						},
						messages: {
							date: function(input) {
								return "Invalid date"
							},	
							number: function(input) {
								return "Invalid number"	
							}	
						}
					};
					var payments = new kendo.data.DataSource({
						autoSync: false,
						transport: {
							read: {url: "/assets/calgrants/com/API.cfc", dataType: "json", type: "GET", cache: false},
							create: {url: "/assets/calgrants/com/API.cfc", dataType: "json", type: "POST"},
							update: {url: "/assets/calgrants/com/API.cfc", dataType: "json", type: "POST"},
							destroy: {url: "/assets/calgrants/com/API.cfc", dataType: "json", type: "POST"},
							parameterMap: function(params, transportType) {
								params.objType = "payment";
								params.method = transportType;
								if (params.method == "read") {
									$.extend(params, queryParams);
								} else {
									$.extend(params, params.models[0]);
									params.models = "";
								}
								return params;
							}	
						},
						schema: {
							type: "json",
							model: payment
						},
						batch: true,
						serverPaging: false,
						page: 1,
						pageSize: 100,
						serverSorting: false
					});
					var rowButtonsTemplate = 		'<a id="editLink_##=uid##" href="" onclick="editRow(\'##=uid##\'); return false;" class="btn btn-mini editButton" title="Edit"><i class="icon-edit"></i></a> ' +
													'<a id="deleteLink_##=uid##" href="" onclick="deleteRow(\'##=uid##\'); return false;" class="btn btn-mini deleteButton" title="Delete"><i class="icon-trash"></i></a>' +
													'<a id="saveLink_##=uid##" href="" onclick="saveRow(\'##=uid##\'); return false;" class="btn btn-mini saveButton" style="display: none;" title="Save"><i class="icon-save"></i></a> ' +
													'<a id="cancelLink_##=uid##" href="" onclick="cancelRow(\'##=uid##\'); return false;" class="btn btn-mini cancelButton" style="display: none;" title="Cancel"><i class="icon-remove"></i></a>';
					var editRow = function(uid) {
						var row = $("##paymentsGrid tr[data-uid='" + uid + "']");
						rowData = grid.dataItem(row);
						toggleButtons(uid, "edit");
						grid.editRow(row);
						return true;
					};
					var deleteRow = function(uid) {
						if (confirm("Are you sure you want to delete this record?")) {
							var row = $("##paymentsGrid tr[data-uid='" + uid + "']");
							grid.removeRow(row);
							return true;
					
						} else {
							return false;
						}
					};
					var saveRow = function(uid) {
						validator.validate();
						if (validator.errors().length == 0) {
							var row = $("##paymentsGrid tr[data-uid='" + uid + "']");
							grid.saveRow(row);
							return true;
						} else {
							alert("Cannot save with invalid data");
							return false;
						}
					};
					var cancelRow = function(uid) {
						var row = $("##paymentsGrid tr[data-uid='" + uid + "']");
						grid.cancelRow(row);
						toggleButtons(uid, "cancel");
						return true;
					};
					var toggleButtons = function(uid, mode) {
						// modes are edit, delete, save and cancel
						var editButton = $("a[id='editLink_" + uid + "']");
						var deleteButton = $("a[id='deleteLink_" + uid + "']");
						var saveButton = $("a[id='saveLink_" + uid + "']");
						var cancelButton = $("a[id='cancelLink_" + uid + "']");
						var editButtons = $(".editButton");
						var deleteButtons = $(".deleteButton");
						var saveButtons = $(".saveButton");
						var cancelButtons = $(".cancelButton");
						if (mode == "edit") {
							editButtons.hide();
							deleteButtons.hide();
							saveButton.show();
							cancelButton.show();
						} else if (mode == "save") {
							saveButton.hide();
							cancelButton.hide();
							editButtons.show();
							deleteButtons.show();
						} else if (mode == "cancel") {
							saveButton.hide();
							cancelButton.hide();
							editButtons.show();
							deleteButtons.show();
						}
					}
					var createGrid = function(){
						grid = $("##paymentsGrid").kendoGrid({
							dataSource: payments,
							autoBind: true,
							columns: [
								{field: "payment_id", title: "ID", template: "<a href='?view=editPayment&Payment_ID=##=payment_id##'>##=payment_id##</a>", menu: false, width: 50},
								{field: "cohort", title: "Cohort", width: 80},
								{field: "claim_id", title: "Claim ID", width: 120},
								{field: "full_name", title: "Name", attributes: {"nowrap": "nowrap"}},
								{field: "scholarship_type", title: "Scholarship Type", width: 140, template: function(dataItem) {
									if (dataItem.scholarship_type == "Performance Based Scholarship") {
										return "PBS";
									} else {
										return dataItem.scholarship_type;
									}
								}},
								{field: "term", title: "Term", width: 110},
								{field: "term_type", title: "Term Type", width: 120, hidden: true},
								{field: "verification_type", title: "Verification Type", width: 135},
								//{field: "opt_out", title: "No payment", width: 120},
								{field: "institution1_document_date", title: "Document Date", format: "{0:M/d/yyyy}", filterable: {ui: "datepicker"}, width: 133},
								//format for integer, select box
								{field: "institution1_enrollment_units", title: "Units", values: unitsCredits, format: "{0:0.00}", hidden: hideColumn("enrollment_units"), menu: !hideColumn("enrollment_units")},
								{field: "institution1_enrollment_attendance_level", title: "Attendance", values: attendanceLevels, template: "##=institution1_enrollment_attendance_level##", hidden: hideColumn("enrollment_attendance_level"), menu: !hideColumn("enrollment_attendance_level")},
								{field: "institution1_enrollment_degree_level", title: "Degree", values: degreeLevels, template: "##=institution1_enrollment_degree_level##", hidden: hideColumn("enrollment_degree_level"), menu: !hideColumn("enrollment_degree_level")},
								{field: "institution1_performance_credits", title: "Credits", value: unitsCredits, format: "{0:0.00}", hidden: hideColumn("performance_credits"), menu: !hideColumn("performance_credits")},
								{field: "institution1_performance_gpa", title: "GPA", format: "{0:0.000}", hidden: hideColumn("performance_gpa"), menu: !hideColumn("performance_gpa")},
								{field: "approval_date", title: "Approval Date", format: "{0:M/d/yyyy}", filterable: {ui: "datepicker"}, width: 123},
								{field: "payment_submitted_date", title: "Payment Submitted Date", format: "{0:M/d/yyyy}", filterable: {ui: "datepicker"}, hidden: true, width: 120},
								{field: "payment_date", title: "Payment Date", format: "{0:M/d/yyyy}", filterable: {ui: "datepicker"}, width: 120},
								{field: "payment_amount", title: "Payment Amount", format: "{0:c}", width: 141}, 
								{field: "payment_status", title: "Status", width: 110, template: function(dataItem) {
									var psArray = dataItem.payment_status.split(";");
									var title = "";
									if (psArray.length == 2) {
										if ($.type(kendo.parseDate(psArray[1])) === "date") {
											title = kendo.toString(kendo.parseDate(psArray[1]), "M/d/yyyy");
										} else {
											title = psArray[1];
										}
										return "<abbr title='" + title + "'>" + psArray[0] + "</abbr>";
									} else {
										return "Unknown";
									}
								}},
								{title: "", template: rowButtonsTemplate, attributes: {nowrap: "nowrap"}, hidden: hideColumn("commands"), width: 70}
							],
							editable: {
								confirmation: "Are you sure you want to delete the selected record?",
								createAt: "top",
								update: true,
								destroy: true,
								mode: "inline"
							},
							sortable: true,
							filterable: {
								extra: false,
								messages: {
									and: "and",
									or: "or",
									filter: "Apply",
									clear: "Clear",
									info: "Column filter",
									isFalse: "Is false",
									isTrue: "Is true",
									selectValue: "Select..."
								},
								operators: {
									string: {
										contains: "Contains",
										//doesnotcontain: "Does not contain",
										eq: "Equals",
										//neq: "Does not equal",
										//startswith: "Starts with",
										//endswith: "Ends with"
									},
									date: {
										eq: "On",
										//neq: "Not on",
										gte: "On or after",
										lte: "On or before",
										gt: "After",
										lt: "Before"
									},
									number: {
										eq: "Equals",
										//neq: "Not equal",
										gte: "Greater than or equal to",
										lte: "Less than or equal to",
										gt: "Greater than",
										lt: "Less than"
									}
								}
							},
							groupable: {
								messages: {
									empty: "Drop column here to group"		
								}
							},
							columnMenu: true,
							reorderable: true,
							resizable: true,
							scrollable: true,
							pageable: {
								pageSize: 20,
								pageSizes: [20, 50, 100, 200, 500],
								buttonCount: 20,
								input: true,
								info: true,
								messages: {
									display: "{0} - {1} of {2} records",
									empty: "Loading...",
									itemsPerPage: "records per page"
								}
							},
							save: function(e) {
								toggleButtons(e.model.uid, "save");
							},
							dataBound: function(e) {
								$("##loadingContainer").hide();
								$("##paymentsGrid").show();
							}
						}).data("kendoGrid");
		
						(function($, kendo) {
							$.extend(true, kendo.ui.validator, customPaymentsGridValidator);
						})(jQuery, kendo);
						
						validator = $("##paymentsGrid").kendoValidator().data("kendoValidator");
						
					};
					
					$(function() {
						degreeLevels.unshift({text: "Select...", value: ""});
						attendanceLevels.unshift({text: "Select...", value: ""});
						unitsCredits.unshift({text: "Select...", value: ""});
						createGrid();
					});
				//-->
				</script>
		
				<div id="loadingContainer" class="row-fluid">
					<div class="span4"></div>
					<div class="span4">
						<p>Data is loading...</p>
						<div class="progress progress-striped active">
							<div class="bar" style="width: 100%;"></div>
						</div>
					</div>
					<div class="span4"></div>
				</div>
				<div id="paymentsGrid" style="display: none;"></div>
				
			<cfelse>
			
				<p class="noRecords">No payments</p>
		
				<script type="text/javascript" language="javascript">
				<!--
					$(function() {
						$("##filter").show();
					});
				// -->
				</script>
				
			</cfif>

	</cfform>
	
</cfoutput>